<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">{{text}}<i class="el-icon-close"></i></div>
    </div>
    <div class="title-receiving">
      <div>
        <span>订单管理</span>/<span class="detail">{{text}}</span>
      </div>
      <el-button type="success"
                 @click="handerBase">返回</el-button>
    </div>
    <div class="container-box">
      <div>
        <el-menu :default-active="activeIndex"
                 class="el-menu-demo"
                 mode="horizontal"
                 @select="handleSelect">
          <el-menu-item index="1">户型信息</el-menu-item>
          <el-menu-item index="2">案例文章</el-menu-item>
          <el-menu-item index="3">关联商品</el-menu-item>
          <el-menu-item index="4" v-if="role=='designer' || role=='decoration'">3D全屋漫游</el-menu-item>
          <el-menu-item v-show="case_id" index="5">点赞列表</el-menu-item>
          <el-menu-item v-show="case_id" index="6">评论列表</el-menu-item>
          <el-menu-item v-show="case_id" index="7">转发列表</el-menu-item>
        </el-menu>
      </div>
      <div class="house-detail"
           v-show="current==1">
           
        <div class="topInfo">
          <h3 style="margin:20px 0;">基本信息：</h3>
          <el-form ref="form" label-position="left">
            <el-form-item label="报价">
              <el-input style="width:20%;" type="number" v-model="offer"></el-input>万元
            </el-form-item>
            <el-form-item label="面积">
              <el-input style="width:20%;" type="number" v-model="area"></el-input>m²
            </el-form-item>
            <el-form-item label="风格">
                <el-select v-model="design_style"                         
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in styleList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
            </el-form-item>
          </el-form>
        </div>


        <h3 style="margin:20px 0;">选择户型：</h3>
        <el-form ref="form"
                 label-position="left">
          <div class="form-area marginb20">
            <div class="area-select">
              <el-form-item label="省份选择"
                            label-width="80px">
                <el-select v-model="district"
                           @change="handleProvince"                           
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in districtTagList"
                             :key="item.cityid"
                             :label="item.city_name"
                             :value="item.cityid">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="estate-select">
              <el-form-item label="市区选择"
                            label-width="80px">
                <el-select v-model="estate"
                           @change="handleCity"
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in estateTagList"
                             :key="item.cityid"
                             :label="item.city_name"
                             :value="item.cityid">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            
            <div class="estate-select">
              <el-form-item label="区域选择"
                            label-width="80px">
                <el-select v-model="region"
                           @change="handleRegion"
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in regionList"
                             :key="item.cityid"
                             :label="item.city_name"
                             :value="item.cityid">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>

            <div class="estate-select">
              <el-form-item label="小区选择"
                            label-width="80px">
                <el-select v-model="resid"
                           @change="handleResid"
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in residList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <!-- <div class="estate">
                  <el-input
                  class="inline-input estate-input"
                    v-model="state"
                    @input="handleQuery"
                    placeholder="请输入小区信息查询"></el-input>
                  <el-autocomplete
                   class="inline-input"
                    v-model="state2"
                    :fetch-suggestions="querySearchAsync"
                    placeholder="点击查询小区信息"
                    @select="handleSearch"
                    
                  ></el-autocomplete>
            </div> -->
            <el-button 
            type="success"
            @click="handleSureSearch">确定搜索</el-button>
          </div>
          <div class="form-area marginb20">
            <!-- <div class="area-select">
              <el-form-item label="面积选择"
                            label-width="80px">
                <el-select v-model="areaList"
                           @change="handleArea"
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in areaTypeTagList"
                             :key="item.id"
                             :label="item.name"
                             :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="estate-select">
              <el-form-item label="房型选择"
                            label-width="80px">
                <el-select v-model="bedroom_num"
                            @change="handleHouseType"
                           popper-class="el-select"
                           placeholder="请选择">
                  <el-option v-for="item in bedroom_numList"
                             :key="item.num"
                             :label="item.name"
                             :value="item.num">
                  </el-option>
                </el-select>
              </el-form-item>
            </div> -->

            <!-- <el-button 
            type="success"
            @click="handleSureSearch">确定搜索</el-button> -->
          </div>
          <div class="house-type" v-if="houseTypeTagList.length>0">
            <h5 class="house-title">匹配出{{houseTypeTagList.length}}张户型图，请选择您需要的户型图</h5>
            <div class="house-img" v-infinite-scroll="houseMoreFn" style="overflow:auto;max-height:500px;">
              <div class="img-item" v-for="(item,index) in houseTypeTagList" :key="index">
                <el-radio v-model="radio" :label="item.id" @change="handleRadio($event,item.id)">
                  <img :src="item.thumb_url[0].path" alt="" class="image">
                </el-radio>
              </div>              
            </div>
          </div>
        </el-form>
      </div>
      <div class="case-article"
           v-show="current==2">
        <div class="case-title marginb20">
          <el-form ref="form"
                   label-position="left">
            <el-form-item label="案例标题"
                          label-width="80px">
              <el-input type="text"
                        v-model="caseList.title"
                        placeholder="请输入案例标题"></el-input>
            </el-form-item>
             <div class="tel-input">
              <el-form-item label="轮播图"
                            label-width="60px">
                <div class="picture-card">
                  <el-upload class="avatar-uploader"
                            action="/api/admin/base/uploadfile"
                            list-type="picture-card"
                            :file-list="bannerList"
                            :on-preview="handlePictureCardPreview"
                            :on-success="handleImageSuccess"
                            :before-upload="beforeImageUpload"
                            :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                  </el-upload>
                </div>

                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%"
                      :src="dialogImageUrl"
                      alt="" />
                </el-dialog>
              </el-form-item>
            </div>
          </el-form>
        </div>
        
        <div style="width:900px;height:300px">
          <!--上传图片时得加载画面-->
          <VueEditor style="width: 100%"
                      v-loading="editorLoading"
                      element-loading-text="图片上传中"
                      element-loading-background="rgba(0, 0, 0, 0.5)"
                      useCustomImageHandler
                      @image-added="handleImageAdded"
                      :editorToolbar="customToolbar"
                      v-model="caseList.content" />
        </div>
      </div>

      <div class="associated-goods"
           v-show="current==3">
        <div class="seach">      
          <el-input v-model="search"
                    placeholder="请输入商品信息查询"></el-input>
          <button @click="getProductMatch"><i class="el-icon-search"></i>搜索</button>
        </div>
        <div class="goodsBox">
          <div class="goods-list"
             v-for="(item,i) in goodsList"
             :key="i">
            <!-- <el-radio
            v-model="radio2"
            :label="item.id"
            @change="handleProduct"> -->
            <!-- <font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)" @change="handleProduct"><i class="el-icon-check"></i></font> -->
              <img :src="item.main_imgurl.path"
                  alt=""
                  class="logo-img">
              <span class="content">{{item.product_title}}</span>
              <span class="selectBtn" @click="toSelect(item)">选择</span>
            <!-- </el-radio> -->
          </div>
          <p v-if="goodsList.length" style="text-align:center;color:#409dfb;margin:10px 0;" @click="openMoreShop">{{moreShopText}}</p>
        </div>
        <!-- <div class="sale_bottom_page_left_checkAll" @click="handerCheckAll" v-if="goodsList.length>0">
					<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
          <div class="checkbox-botton">全选</div>
				</div>				 -->
        <div class="goods" v-if="shopRela.length>0">
          <h5 class="title">已关联商品</h5>
          <div class="good-img">
            <div v-for="(item,i) in shopRela"
                 :key="i"
                 class="img-item">
              <img :src="item.main_imgurl.path"
                   alt=""
                   class="image">
              <div class="img-title">{{item.product_title}}</div>
              <i class="el-icon-circle-close" @click="toDel(i)"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="case_3D" v-show="current==4">
        <div class="seach">      
          <el-input v-model="search3D"
                    placeholder="请输入酷家乐3D方案名称搜索"></el-input>
          <button @click="get3DCase"><i class="el-icon-search"></i>搜索</button>
        </div>

        <!-- 方案搜索列表 -->
        <div class="seachList">
          <div class="seachItem" v-for="(item,index) in case3DList" :key="index">
            <span class="text3D">{{item.name}}</span>
            <span class="selectBtn" @click="select3D(item)">选择</span>
          </div>
          <p v-if="case3DList.length" style="text-align:center;color:#409dfb;margin:10px 0;" @click="openMore">{{moreText}}</p>
        </div>

        <div class="rela_3d" >
          <h4>已关联酷家乐3D方案：</h4>
          <div class="list">
            <div class="text">{{rela3DList.name}}</div>
            <img :src="rela3DList.coverPic?rela3DList.coverPic:''" alt="">
          </div>
        </div>
       <div style="margin-top:20px;">
         是否3D展示：
         <el-radio v-model="show3D" label="1">是</el-radio>
         <el-radio v-model="show3D" label="0">否</el-radio>
       </div>
       <div style="margin-top:20px;">
         是否展示轻设计：
         <el-radio v-model="showLight" label="1">是</el-radio>
         <el-radio v-model="showLight" label="0">否</el-radio>
       </div>
       <div style="margin-top:20px;">
         轻设计ID：
         <el-input style="width:30%;" readonly v-model="lightID" placeholder="请输入轻设计ID"></el-input>
       </div>
      </div>
      
      <!-- 点赞列表 -->
      <div class="support"
           v-show="current==5">
        <h6 class="title">共收到{{fabulousTotal}}条点赞</h6>
        <div class="support-content">
          <el-table :data="fabulousData"
                    height="250"
                    border
                    style="width: 100%">
            <el-table-column prop="id"
                             label="序号"
                             width="180">
            </el-table-column>
            <el-table-column prop="nickname"
                             label="昵称"
                             width="180">
            </el-table-column>
            <el-table-column prop="create_time"
                             label="点赞时间">
            </el-table-column>
          </el-table>
        </div>
        <div class="payment_index_bottom_page">
          <div class="payment_index_bottom_page_left">
          </div>
          <div class="payment_index_bottom_page_right">
            <el-pagination @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                          :current-page="page_fab"
                          :page-sizes="[10, 20, 30, 40]"
                          :page-size="pagesize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="fabulousTotal"
                          background>
            </el-pagination>
          </div>
        </div>
      </div>

      <!-- 评论列表 -->
      <div class="comment"
           v-show="current==6">
        <h6 class="title">共收到{{commentTotal}}条评论</h6>
        <div class="comment-content">
          <div class="content"
               v-for="item in commentList"
               :key="item.id">
            <div class="content-left">
              <img :src="item.user_id.avatar.path"
                   alt=""
                   class="comment-image">
              <div class="comment-center">
                <p>{{item.user_id.username}}</p>
                <p class="item-content">{{item.content}}</p>
              </div>
            </div>

            <div class="comment-right">
              <p>{{item.create_time | dateformat('YYYY-MM-DD HH:mm')}}</p>
              <div class="comment-btn">
                <button @click="handleReply(item)" style="margin-right:20px">回复</button>
                <button @click="handleDel(item.id)">删除</button>
              </div>
            </div>
          </div>
        </div>
        <div class="payment_index_bottom_page">
          <div class="payment_index_bottom_page_left">
          </div>
          <div class="payment_index_bottom_page_right">
            <el-pagination @size-change="handleSizeChange3"
                          @current-change="handleCurrentChange3"
                          :current-page="page_com"
                          :page-sizes="[10, 20, 30, 40]"
                          :page-size="pagesize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="commentTotal"
                          background>
            </el-pagination>
          </div>
        </div>
      </div>

      <!-- 转发列表 -->
      <div class="forward"
           v-show="current==7">
        <h6 class="title">共转发{{forwardTotal}}次</h6>
        <div class="forward-content">
          <el-table :data="forwardData"
                    height="250"
                    border
                    style="width: 100%">
            <el-table-column prop="id"
                             label="序号"
                             width="180">
            </el-table-column>
            <el-table-column prop="nickname"
                             label="昵称"
                             width="180">
            </el-table-column>
            <el-table-column prop="create_time"
                             label="转发时间">
            </el-table-column>
          </el-table>
        </div>
         <div class="payment_index_bottom_page">
          <div class="payment_index_bottom_page_left">
          </div>
          <div class="payment_index_bottom_page_right">
            <el-pagination @size-change="handleSizeChange2"
                          @current-change="handleCurrentChange2"
                          :current-page="page_for"
                          :page-sizes="[10, 20, 30, 40]"
                          :page-size="pagesize"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="forwardTotal"
                          background>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>   
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <div>
        <textarea name="" id="" style="padding:10px;width:100%;height:140px;border:1px solid #ccc" cols="30" v-model="content_com" rows="10" placeholder="请输入回复内容~"></textarea>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="toSubComment">确 定</el-button>
      </span>
    </el-dialog> 
    <div class="primary-btn"
         v-show="current==4" v-if="role=='designer' || role=='decoration'">
      <el-button type="primary"
                 class=""
                 @click="handleAdd">提交</el-button>
    </div>  
    <div class="primary-btn"
         v-show="current==3" v-else>
      <el-button type="primary"
                 class=""
                 @click="handleAdd">提交</el-button>
    </div>
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
import unil from "../../../uitls/util";
export default {
  components: { VueEditor },
  name: 'Vue2Editor',
  data () {
    return {
      text:'新增案例',
      activeIndex: '1',
      current: 1,
      districtList: [],//地区标签
      districtTagList: [],
      estateList: [], //小区标签
      estateTagList: [],
      areaList: [], //面积标签
      areaTagList: [],
      houseTypeList: [], //房型标签
      houseTypeTagList: [],
      houseTypeImg1: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1807000920,2717777408&fm=26&gp=0.jpg",
      houseTypeImg2: "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2491040143,2203053978&fm=11&gp=0.jpg",
      radio: '',
      radio2:'',
      caseTitle: '',
      editorLoading: false, //富文本图片loading
      editor: '',
      customToolbar: [
        [{ 'header': [false, 1, 2, 3, 4, 5, 6] }], //标题
        ['bold', 'italic', 'underline'],  //加粗\斜体\下划线
        ['italic'],  //斜体----也可以拆开来写，用于换位置顺序
        [{ 'align': '' }, { 'align': 'center' }, { 'align': 'right' }], //对齐
        [{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'list': 'check' }], //有序无序列表
        [{ 'background': [] }, { 'color': [] }], //背景色
        ['image', 'link'],  //图片、链接
        ['strike'],   //作废（文字中间一横）
        ['underline'],
        ['clean'],   //清楚格式（所谓去掉背景色这些花里胡巧）
        ['code'],  //代码
        ['code-block'], //代码块
        //['video'] //视频
      ],
      search: '',//小区匹配
      goodsList: [],//关联商品
      case_id: '',//案例id
      caseList:{},//详情数据
      estate:'',//城市选中
      district:'',//省份选中
      restaurants: [],
      state: '',
      cityID:null,//城市id
      timeout:null,
      state2:'',//小区名字
      estateName:'',
      sid:null,//设计师id
      houseTypeId:null,//户型id、
      houseImg:'',//户型图片
      productId:'',//商品id
      dialogImageUrl: '',//轮播图
      dialogVisible: false,
      img_id: [], //轮播图id数组
      imgId: '', //轮播图列表
      checkBoxAll: [],// 选中的数据
      shelvesAlls: [],
      bannerList:[],//banner列表
      checkAll: false,
      shopRela:[], // 关联商品
      // shopRelaId:[], //关联商品id
      shelvesAll:'',
      regionList:[], //区域列表
      region:'', // 选中的区域
      residList:[],//小区列表
      resid:'', // 选中小区
      areaTypeTagList:[], //面积列表
      areaList:'', //选中面积
      bedroom_numList:[{
        name:'一室',
        num:1
      },{
        name:'二室',
        num:2
      },{
        name:'三室',
        num:3
      },{
        name:'四室',
        num:4
      }],
      bedroom_num:'', //当前选择的居室数
      search3D:'',
      page:1,
      pagesize:10,
      pageShop:1,
      pagesizeShop:10,
      pageHouse:1,
      pagesizeHouse:10,
      case3DList:[], //3d方案列表
      rela3DList:{},//3d关联方案
      show3D:'0', //是否3d展示
      role:'', //角色
      fabulousData:[], //点赞列表
      fabulousTotal:0, //点赞条数
      page_fab:1,
      commentList:[], //评论列表
      commentTotal:0, //评论条数
      page_com:1,
      content_com:'', //评论回复内容
      commentEvent:{}, //当前回复项

      forwardData:[], //转发列表
      forwardTotal:0, //转发条数
      page_for:1,
      pagesize:10,
      dialogVisible:false, //回复时的对话框
      showLight:'0', //轻设计
      lightID:'', //轻设计ID

      offer:'',//报价
      area:'',//面积
      design_style:'',//风格选中
      styleList:[], //风格列表
      moreText:'点击加载更多',
      moreShopText:'点击加载更多',
    }
  },
  mounted () {
    this.sid = localStorage.getItem('sid')
    this.role = localStorage.getItem('role')
    console.log(this.role);
    console.log(this.$route.query.id,'详情案例id');
    this.case_id = this.$route.query.id;
    if(this.case_id){
      this.text = '案例详情'
      this.getDesignCase();
      // this.getFabulList();
      // this.getCommentList();
      // this.getForwardList()
    }
    this.getProvinceList();   
    this.getStyleList()
  },
  methods: {
    // 获取风格列表
    getStyleList(){
      this.$http.post('/api/admin/base/option/getList').then(res=>{
        console.log(res,'风格列表');
        if(res.code==1){
          this.styleList = res.data.design_style?res.data.design_style:[]
        }
      })
    },
    // 获取3D方案
    get3DCase(){
      this.moreText = '点击加载更多'
      this.page = 1
      let data = {
        keyword:this.search3D,
        page:this.page,
        pagesize:this.pagesize
      }
      this.$http.post('/api/admin/designer/KuJiaLe/panocase',data).then(res=>{
        console.log(res,'3d方案');
        if(res.code==1){
          if(res.data.list.length<10){
            this.moreText = '没有更多了'
          }
          this.case3DList = res.data.list?res.data.list:[]
          // if(res.data.list)
        }else{
          this.$message.warning(res.msg)
        }
      })
    },
    // 点击加载更多
    openMore(){
      this.page++
      let data = {
        keyword:this.search3D,
        page:this.page,
        pagesize:this.pagesize
      }
      this.$http.post('/api/admin/designer/KuJiaLe/panocase',data).then(res=>{
        console.log(res,'3d方案');
        if(res.code==1){
          if(!res.data.list.length){
            this.moreText = '没有更多了'
          }
          this.case3DList = this.case3DList.concat(res.data.list)
          // if(res.data.list)
        }else{
          this.$message.warning(res.msg)
        }
      })
    },
    // 选择3d关联方案
    select3D(item){
      console.log(item,'3d关联');
      this.rela3DList = item
      this.show3D = item?'1':'0'
      this.lightID = item.easyDesignId?item.easyDesignId:''
      this.showLight = item.easyDesignId?'1':'0'
      this.case3DList = []
    },


    // 选择关联商品
    toSelect(item){
      console.log(item,'关联商品');
      let index = this.shopRela.findIndex(item1=>item1.id==item.id)
      if(index!=-1){
        this.$message.warning('请勿重复关联该商品！')
      }else{
        if(this.case_id){ //编辑时
          this.$http.post('/api/admin/designer/CaseProduct/add',{case_id:this.case_id,product_id:item.id}).then(res=>{
            console.log(res,'编辑时关联');
            if(res.code==1){
              this.$message.success('关联成功')
              this.getShopRela()
            }
          })
        }else{
          this.shopRela.push(item)
        }
      }
    },
    // 删除关联商品
    toDel(index){
      if(this.case_id){
        this.$http.post('/api/admin/designer/CaseProduct/del',{id:this.shopRela[index].id}).then(res=>{
          console.log(res,'编辑时移除关联商品');
          if(res.code==1){
            this.$message.success('已移除该关联商品')
            this.getDesignCase()
          }else{
            this.$message.warning(res.msg)
          }
        })
      }else{
        this.shopRela.splice(index,1)
      }
    },

    //轮播图
     handlePictureCardPreview(file) {
      //  console.log(file,6666);
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
     handleImageSuccess(res, file) {
      console.log('图片上传1', file.response)
      let logoData = file.response.data
      this.dialogImageUrl = logoData.url
      this.bannerList.push({
        id:logoData.id,
        url:logoData.url
      })
      // let img_id = []
      this.img_id.push(logoData.id)
      console.log(this.img_id, 'id----------')

      this.imgId = this.img_id.join(',')

      // console.log(this.imgId);
      // this.logo_id = logoData.id
    },
     beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove(file, fileList) {
      console.log(file, fileList)
      let index = this.bannerList.findIndex(item=>item.id==file.id)
      this.bannerList.splice(index,1)
      console.log(this.bannerList,'删除后banner列表');
    },
    //选择商品id
    handleProduct(e){
      // console.log(e,"商品id");
      this.productId = e
    },
    
    //选择房型图
    handleRadio(e,id){
      // console.log(e,"图片");
      // this.houseImg = this.houseTypeTagList[e].thumb_url
      this.houseTypeId = id
      this.radio = id
      console.log(e,id,'dskjsdj');
    },
    // //房型数据
    handleHouseType(e){
      // console.log(envent,"fangxing---------zhi");
      // this.houseTypeId = e
      this.bedroom_num = e
    },
    //立即添加
    handleAdd(){
      if(this.offer==''){
        this.$message.warning('请填写报价')
        return
      }
      if(this.area==''){
        this.$message.warning('请填写面积')
        return
      }
      if(this.design_style==''){
        this.$message.warning('请选择风格')
        return
      }
      if(!this.houseTypeId){
        this.$message.warning('请选择户型')
        return
      }
      if(!this.caseList.title){
        this.$message.warning('请填写案例标题')
        return
      }
      if(!this.bannerList.length){
        this.$message.warning('轮播图必传')
        return
      }
      if(!this.caseList.content){
        this.$message.warning('请填写案例文章内容')
        return
      }
      let shopRelaId = [];
      this.shopRela.map(item=>{
        shopRelaId.push(item.id)
      })
      // if(!shopRelaId.length){
      //   this.$message.warning('请选择关联商品')
      //   return
      // }
      let product_id = shopRelaId.join(',')
      let imgId = []
      this.bannerList.map(item=>{
        imgId.push(item.id)
      })
      let thumb_url = imgId.join(',')
      if(!this.lightID){
        this.showLight='0'
      }
      // let role = localStorage.getItem('role')
      let params = {
        id:this.case_id,
        // designer_id:role=='decoration'?'':this.sid,
        // decoration_id:role=='decoration'?this.sid:'',
        // case_type:role=='decoration'?2:1,
        case_type:1,
        designer_id:this.sid,
        house_id:this.houseTypeId,
        title:this.caseList.title,
        content:this.caseList.content,
        thumb_url, //应用场景轮播图多个1,2
        product_id,
        is_display:this.show3D,
        display_title:this.rela3DList.name,
        display_url:this.rela3DList.designPanoUrl,
        display_id:this.rela3DList.designId,
        display_cover:this.rela3DList.coverPic,
        is_light_design:this.showLight,
        light_design_id:this.lightID,
        offer:this.offer,
        area:this.area,
        design_style:this.design_style

      }
      console.log(params,'添加数据s');
      if(this.case_id){
        // params.product_id=''
        this.$api.DesignCase_edit(params).then(res=>{
          if(res.code==1){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            // this.$router.go(-1);
          }else{
            this.$message.warning(res.msg)
          }
        })
      }else{
        this.$api.DesignCase_add(params).then(res=>{
          if(res.code==1){
            this.$message({
              message: '添加成功',
              type: 'success'
            });
            this.$router.go(-1);
          }else{
            this.$message.warning(res.msg)
          }
        })
      }
    },
    
    //确定搜索户型
    handleSureSearch(){
      this.pageHouse = 1
      this.houseTypeTagList = []
      this.handleSureSearch_house()
    },
    handleSureSearch_house(){
      let params = {
       estate_id:this.resid,
       area:this.areaList,
       bedroom_num:this.bedroom_num,
       page:this.pageHouse,
       pagesize:this.pagesizeHouse
      }
      this.$api.DesignCase_houseMatch(params).then(res=>{
        console.log(res,"户型匹配数据");
        if(res.code==1){
          // this.houseTypeTagList = res.data?res.data:[]
          let data = res.data
          for(let i = 0;i<data.length;i++){
            this.houseTypeTagList.push(data[i])
          }
        }
      })
    },
    // 加载更多户型
    houseMoreFn(){
      this.pageHouse++
      this.handleSureSearch_house()
    },
    //小区匹配
     querySearchAsync(queryString, cb) {
        var restaurants = this.restaurants;
        // console.log(restaurants,"xiaoqu----------");
        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

        clearTimeout(this.timeout);
        this.timeout = setTimeout(() => {
          cb(results);
        }, 3000 * Math.random());
      },
      createStateFilter(queryString) {
        return (state2) => {
          return (state2.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
    handleSearch(item){
        // console.log(item,666);
        this.estateName = item.value
    },
    //获取省份ID以及城市列表
    handleProvince(e){
      //  this.estate = e
       this.getCity()
    },

    // 获取城市列表
    getCity(){
      this.$api.Region_getCityList({province_id:this.district}).then(res=>{
        console.log(res,"chengshi ");
        if(res.code==1){
          this.estateTagList = res.data
        }
      })
    },

    // areaTypeTagList(e){

    // },

    // 选中面积
    handleArea(e){
      this.areaList = e
      console.log(this.areaList);
      
    },
    // 获取面积
    getArea(){
      this.$http.post('/api/admin/designer/DesignCase/selectOption').then(res=>{
        console.log(res,'面积');
        if(res.code==1){
          this.areaTypeTagList = res.data.option_list?res.data.option_list:[]
        }
      })
    },

    // 选择区域id
    handleRegion(e){
      this.region = e
      this.getEstateMatch()
    },

    //获取区域
    handleCity(e){
      // this.cityID = e 
      this.$http.post('/api/admin/base/Region/getDistrictList',{city_id:this.estate}).then(res=>{
        console.log(res,'区域');
        if(res.code==1){
          this.regionList = res.data?res.data:[]
        }
      })  
    },

    

    // 选中小区id
    handleResid(e){
      // this.resid = e
      // this.getArea()
    },

    //获取小区数据
    getEstateMatch(){
      let params = {
        district_id : this.region,
      }
      this.$api.DesignCase_estateMatch(params).then(res=>{
        console.log(res,"小区数据 ");
        if(res.code==1){
          this.residList = res.data?res.data:[]
        }
      })
    },
    //在输入框改变时触发
    // handleQuery(){
    //   this.getEstateMatch()
    // },

    //获取省份
    getProvinceList(){
      this.$api.Region_getProvinceList().then(res=>{
        if(res.code==1){
          this.districtTagList = res.data
        }
      })
    },

    // 获取点赞列表
    getFabulList(){
      let params = {
        case_id:this.case_id,
        page:this.page_fab,
        pagesize:this.pagesize
      }
      this.$api.CaseSupport_index(params).then(res=>{
        console.log(res,'点赞列表');
        if(res.code==1){
          this.fabulousData = res.data.list?res.data.list:[]
          this.fabulousTotal = res.data.total
        }
      })
    },
    // 点赞分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page_fab = val;
      this.getFabulList()
    },

    // 获取评论列表
    getCommentList(){
      let params = {
        case_id:this.case_id,
        page:this.page_fab,
        pagesize:this.pagesize
      }
      this.$api.CaseComment_index(params).then(res=>{
        console.log(res,'评论列表');
        if(res.code==1){
          this.commentList = res.data.list?res.data.list:[]
          this.commentTotal = res.data.total
        }
      })
    },
     //评论回复
    handleReply(event){
      this.dialogVisible = true
      this.commentEvent = event
    },
    // 回复对话框确定按钮
    toSubComment(){
      let params = {
        id: this.commentEvent.id,
        user_id:this.commentEvent.user_id.id,
        content:this.content_com
      }
      this.$api.CaseComment_reply(params).then(res => {
        if (res.code == 1) {
          this.$message.success('回复成功')
          this.getCommentList()
          this.dialogVisible = false
        }else{
          this.$message.warning(res.msg)
        }
      })
    },
    // 评论删除
    handleDel(id){
      this.$api.CaseComment_del(id).then(res => {
        if (res.code == 1) {
         this.$message({
          message: '删除成功',
          type: 'success'
          });
          this.getCommentList()
        }
      })
    },
    handleClose(){

    },
    // 评论分页
    handleSizeChange3(){

    },
    handleCurrentChange3(val){
      console.log(`当前页: ${val}`);
      this.page_com = val;
      this.getCommentList()
    },

    // 获取转发列表
    getForwardList(){
      let params = {
        case_id:this.case_id,
        page:this.page_fab,
        pagesize:this.pagesize
      }
      this.$api.CaseForward_index(params).then(res=>{
        console.log(res,'转发列表');
        if(res.code==1){
          this.forwardData = res.data.list?res.data.list:[]
          this.forwardTotal = res.data.total
        }
      })
    },
    // 转发分页
    handleSizeChange2(){

    },
    handleCurrentChange2(val){
      console.log(`当前页: ${val}`);
      this.page_for = val;
      this.getForwardList()
    },

    //获取案例详情
    getDesignCase(){
      let params = {
        id:this.case_id
      }
      this.bannerList = []
      let role = localStorage.getItem('role')
      let url = role=='decoration'?'/api/admin/decoration/DesignCase/view':'/api/admin/designer/DesignCase/view';
      this.$http.post(url,params).then(res=>{
        console.log(res,'案例详情');
        if(res.code==1){
           //banner图
          this.caseList = res.data
          let banner = Array.isArray(res.data.thumb_url)
            if(banner){
              res.data.thumb_url.map(item=>{
                this.bannerList.push({
                  url:item.path,
                  id:item.id
                })
              })
              console.log(this.bannerList,'banner详情');
            }else{
              this.bannerList.push({
                url:res.data.thumb_url.path,
                id:res.data.thumb_url.id
              })
            }
            this.offer = res.data.offer
            this.area = res.data.area
            this.design_style = res.data.design_style.length?res.data.design_style[0].id:'';

          if(res.data.house){
            console.log('111111111');
            this.houseTypeTagList.push(res.data.house)
            this.radio = res.data.house.id
            this.houseTypeId = res.data.house.id
            this.district = res.data.house.province_id //省份
            if(this.district){
              // this.getProvinceList()
               this.getCity() //获取城市
            }
            this.estate = res.data.house.city_id //城市
            if(this.estate){
                this.handleCity() //获取县区
            }
            this.region = res.data.house.district_id //区域
            if(this.region){
              this.getEstateMatch() //获取小区
            }
            this.resid = res.data.house.estate_id //小区
            // this.getArea()
            // this.areaList = res.data.house.area //面积
            // this.bedroom_num = res.data.house.bedroom_num //居室数
            this.lightID = res.data.light_design_id
            this.showLight = res.data.is_light_design==1?'1':'0'
          }
          // 关联商品
          // if(res.data.product.length){
          //   let shop = Array.isArray(res.data.product)
          //   if(shop){
          //     this.shopRela = res.data.product
          //   }else{
          //     this.shopRela.push(res.data.product)
          //   }
          // }
          this.getShopRela()

          // 3D全屋漫游
          this.rela3DList = {
            name:res.data.display_title,
            designPanoUrl:res.data.display_url,
            designId:res.data.display_id,
            coverPic:res.data.display_cover
          }
          this.show3D = res.data.is_display.toString()
          
        }
      })
    },

    // 获取关联商品列表
    getShopRela(){
      let params = {
        case_id:this.case_id,
        page:1,
        pagesize:10
      }
      this.$http.post('/api/admin/designer/CaseProduct/index',params).then(res=>{
        console.log(res,'关联商品列表');
        if(res.code==1){
          this.shopRela = res.data.list?res.data.list:[]
        }
      })
    },

    //商品匹配
    getProductMatch(){
      this.moreShopText = '点击加载更多'
      this.pageShop=1
      let params = {
        page:this.pageShop,
        pagesize:this.pagesizeShop,
        product_title:this.search
      }
      this.$api.DesignCase_productMatch(params).then(res=>{
        if(res.data.length<10){
          this.moreShopText = '没有更多了'
        }
        this.goodsList = res.data
        // console.log(this.goodsList,"shangp-------");
      })
    },
    // 点击加载更多商品
    openMoreShop(){
      this.pageShop++
      let params = {
        page:this.pageShop,
        pagesize:this.pagesizeShop,
        product_title:this.search
      }
      this.$api.DesignCase_productMatch(params).then(res=>{
        if(!res.data.length){
          this.moreShopText = '没有更多了'
        }
        this.goodsList = this.goodsList.concat(res.data)
        // console.log(this.goodsList,"shangp-------");
      })
    },
   
    handerBase () {
      this.$router.go(-1);
    },
    handleSelect (key, keyPath) {
      this.current = key
      console.log(key,'0000');
      if(key=='5'){
        this.getFabulList()
      }else if(key=='6'){
        this.getCommentList()
      }else if(key=='7'){
        this.getForwardList()
      }
    },
    //富文本上传图片
    handleImageAdded (file, Editor, cursorLocation, resetUploader) {
      var formData = new FormData();
      let isLtSize = file.size / 1024 / 1024 < 10;
      if (!isLtSize) {
        this.$message.warning("上传文件不能超过 10MB!");
        return;
      }
      this.editorLoading = true
      formData.append("file", file);
      this.$api.uploadfile(formData)
        .then(result => {
          // 你上传路径返回的url
          let url = result.data.url;
          Editor.insertEmbed(cursorLocation, "image", url);
          resetUploader();
          this.editorLoading = false
        })
        .catch(err => {
          console.log(err);
          this.editorLoading = false
        });
    },
  }

}
</script>

<style scoped lang="less">
.container {
  .index_top {
    .current {
      padding-left: 20px;
    }
  }
  .title-receiving {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px;
    .detail {
      color: #409eff;
    }
  }
  .house-detail {
    padding: 20px 0 50px 0;
    .form-area {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .area-select {
        margin-right: 50px;
      }
      .estate-select{
        margin-right: 50px;
      }
      .estate{
        // border: 1px solid #dcdfe6;
        display: flex;
        height: 40px;
        font-size: 16px;
        line-height: 40px;
        margin-top: -22px;
        // width: 500px;
        .inline-input{
          width: 300px;
          height: 40px;
        }
        .estate-input{
          width: 100px;

        }
      }
      .el-button{
        margin-top: -22px;
      }
    }
    .house-type {
     
      .house-title {
        margin-bottom: 30px;
      }
      .house-img {
        width: 1500px;
        display: flex;
        align-items: center;
        flex-wrap:wrap;
        .image {
          width: 228px;
          height: 228px;
        }
        .img-item{
          margin-right: 10px;
        }
      }
    }
  }
  .case-article {
    padding: 20px 0 50px 0;
    .case-title {
      width: 50%;
    }
  }
  .editor .ql-editor {
    min-height: 300px;
    max-height: 300px;
    font-size: 14px;
  }
  .associated-goods {
    margin-top: 30px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 40px;
    margin-bottom: 30px;
    .seach {
      width: 50%;
      margin-bottom: 20px;
      display: flex;
      button {
        width: 100px;
        background: #409dfb;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        border: 0 none;
        outline: none;
        border-radius: 4px;
        color: #fff;

        i {
          margin-right: 5px;
        }
      }
    }
    .goodsBox{
      width: 50%;
      max-height: 400px;
      overflow-y: auto;
    }
    .goods-list {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      border: 1px solid #e0e0e0;
      padding: 5px;
      .checkbox {
        display: inline-block;
        width: 18px;
        height: 18px;
        text-align: center;
        line-height: 18px;
        font-size: 14px;
        border: 1px solid #e3e3e3;
        color: #fff;
        cursor: pointer;
      }
      
      .check_active {
        background: #409DFB 10000%;
      }
      .logo-img {
        width: 40px;
        height: 40px;
      }
      .content {
        width: 500px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .selectBtn{
        cursor: pointer;
      }
    }
    .goods {
      .title {
        color: #000;
      }
      .good-img {
        display: flex;
        // align-items: center;
        .img-item {
          position: relative;
          margin-right: 10px;
        }
        .image {
          width: 130px;
          height: 130px;
        }
        .img-title {
          position: absolute;
          width: 130px;
          left: 0;
          bottom: 0;
          padding: 5px;
          color: #fff;
          background: rgba(0, 0, 0, 0.5);
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        i{
          position: absolute;
          top: 0;
          right: 0;
          font-size: 20px;
        }
      }
    }
  }
  .title {
    color: #000;
    margin-top: 20px;
  }

  // 3D全屋漫游
  .case_3D{
    margin-top: 30px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 40px;
    margin-bottom: 30px;
    .seach {
      width: 50%;
      margin-bottom: 10px;
      display: flex;
      button {
        width: 100px;
        background: #409dfb;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 15px;
        border: 0 none;
        outline: none;
        border-radius: 4px;
        color: #fff;

        i {
          margin-right: 5px;
        }
      }
    }
    // 搜索方案列表
    .seachList{
      width: 50%;
      max-height: 400px;
      overflow-y: auto;
      margin-bottom: 30px;
      // padding-right: 105px;
      .seachItem{
        line-height: 40px;
        padding: 0 18px;
        display: flex;
        justify-content: space-between;
        width: 100%;
        border: 1px solid #e0e0e0;
        width: 100%;
        height: 40px;
        .text3D{
          width: 200px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .selectBtn{
          cursor: pointer;
        }
      }
    }

    // 已关联列表
    .rela_3d{
      display: flex;
      
      .list{
        margin-left: 20px;
        .text{
          width: 130px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-bottom: 10px;
        }
        img{
          width: 130px;
          height: 130px;
        }
      }
    }
  }
  
  .comment {
    .title {
      color: #000;
    }
    .comment-content {
      padding: 0 50px 50px 50px;
      .content {
        width: 75%;
        padding: 20px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .content-left {
          display: flex;
          align-items: center;
          .comment-image {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 10px;
          }
          .comment-center {
            .item-content {
              width: 350px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
        }

        .comment-right {
          .comment-btn {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 10px;
            button {
              padding: 0px 8px;
              border: 1px solid #e0e0e0;
              background: #fff;
            }
          }
        }
      }
    }
  }
 
  .primary-btn {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
   //图片上传样式
    .tel-input {
        // margin-right: 100px;
        display: flex;
        align-items: center;
        .avatar-uploader .el-upload {
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
          border-color: #409eff;
        }
        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }
        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
        .tag {
          width: 750px;
        }
        .price {
          margin-left: 20px;
        }
        .el-icon-error {
          font-size: 20px;
          margin-left: 5px;
        }
        .money {
          margin-left: 10px;
        }
        .cover {
          width: 250px;
          height: 150px;
        }
        .add-item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: 1px solid #c0c4cc;
          padding: 0 5px;
          margin-right: 10px;
          margin-bottom: 10px;
          width: 200px;
          i {
            cursor: pointer;
          }
        }
      }
  //全选
  .sale_bottom_page_left_checkAll{
    width: 61px;
    height: 61px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-right: 10px;
    
    .checkbox {
      display: inline-block;
      width: 18px;
      height: 18px;
      text-align: center;
      line-height: 18px;
      font-size: 14px;
      border: 1px solid #e3e3e3;
      color: #fff;
      cursor: pointer;
    }
    
    .check_active {
      background: #409DFB 10000%;
    }
  }
}
</style>